import React, { useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.scss';


const ContentCard = ({records}) => {

  return (
    <View className='articles-section'>
      <View>
        {records && records.map((article, index) => (
          <View key={index} className='article-card'>
            <Image
              src={article.image}
              mode='widthFix'
              className='article-image'
            />
            <View className='article-content'>
              <Text className='article-title'>{article.title}</Text>
              <Text className='article-source'>{article.source}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  )
};

export default ContentCard;
